<template>
  <div class="top">
    <nav>
      <img src="/img/logo.png" alt="" class="logo">
      <ul>
        <li><a href="/" :class="active === '/' ? 'active' : ''">首页</a></li>
        <li><a href="/about" :class="active === '/about' ? 'active' : ''">关于我们</a></li>
        <li><a href="/product" :class="active === '/product' ? 'active' : ''">产品中心</a></li>
        <li><a href="/news" :class="active === '/news' ? 'active' : ''">新闻资讯</a></li>
        <li><a href="/cart" :class="active === '/cart' ? 'active' : ''">购物车</a></li>
        <li v-if="!userInfo"><a href="/login" :class="active === '/login' ? 'active' : ''">登录</a></li>
        <li v-if="!userInfo"><a href="/register" :class="active === '/register' ? 'active' : ''">注册</a></li>
        <li v-if="userInfo"><a href="/me" :class="active === '/me' ? 'active' : ''">个人中心</a></li>
      </ul>
    </nav>
  </div>
</template>

<script>
import { getInfo } from '@/api/user'

export default {
  name: 'TopNav',
  data() {
    return {
      userInfo: null,
      active: '/',
    };
  },
  created () {
    var pathname = window.location.pathname;
    this.active = pathname
    this.getUserInfo()
  },
  methods: {
    getUserInfo() {
      getInfo().then(res => {
        this.userInfo = res.data
        console.log('userInfo:', this.userInfo)
      })
    },
  }
}
</script>
<style>
</style>
